{% extends '_base.html' %}


{% block style %}
<style>
    header {
        background-image: url({{ url_for('static', filename='img/img1.jpg') }});
    }

    .title {
        font-size: 24px;
        margin: 16px;
        border-left: 5px solid rgba(25, 226, 183, 0.63);
        padding-left: 10px;
        margin-top: 60px;
    }

    .apply {
        margin: 16px;
    }

    .apply .text-title {
        font-size: 20px;
        margin-top: 30px;
    }

    pre {
        border-radius: 3px;
        background-color: #f7f7f7;
        color: inherit;
        line-height: 1.7em;
        overflow: auto;
        padding: 6px 10px;
        font-size: 14px;
        margin: 16px;
    }

    .link-list {
        padding: 10px;
        width: 100%;
        flex-wrap: wrap;
        justify-content: start;
    }

    .link-list .item {
        width: 31.5%;
        height: 120px;
        border-radius: 20px;
        margin: 6px;
        padding: 16px;
        border: 1px solid rgba(119, 119, 119, 0.7);
        position: relative;
        overflow: hidden;
        z-index: 1;
    }

    .link-list .item::before {
        content: "";
        display: block;
        width: 200%;
        height: 300%;
        background-color: rgba(54, 243, 218, 0.16);
        position: absolute;
        transform: rotate(45deg) translate(-60%);
        top: 550px;
        transition: top .5s;
        left: 0;
    }

    .link-list .item:hover::before {
        top: 80px;
    }

    .link-list .item .profile {
        height: 120px;
        width: 120px;
        position: absolute;
        top: 0;
        right: 0;
        overflow: hidden;
        padding: 14px;
    }

    .link-list .item .profile img {
        height: 100%;
        border-radius: 50%;
        border: 3px solid rgba(119, 119, 119, 0.3);
        padding: 2px;
        display: block;
        object-fit: cover;
        transform: rotate(0deg);
        overflow: hidden;
        transition: transform ease-in-out 1s;
    }

    .link-list .item .profile a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .link-list .item:hover img {
        transform: rotate(360deg);
    }

    .link-list .item .text {
        margin-left: 4px;
        margin-right: 85px;
        margin-top: 4px;
        position: relative;
    }

    .link-list .item hr {
        width: 100%;
        border: none;
        height: 1px;
        border-bottom: 1px solid rgba(68, 68, 68, 0.15);
    }

    .site-name {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 15px;
    }

    .info {
        font-size: 13px;
        color: #777;
        margin-top: 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    @media (max-width:420px) {
        .link-list .item{
            width: 100%;
        }
    }
</style>
</style>
{% endblock %}


{% block title %}
友链
{% endblock %}

{% block nav_class %}top-show{% endblock %}
{% block header_content %}
<div class="container-flex">
    <div class="box">
        <div class="h1">友情链接</div>
    </div>
</div>
{% endblock %}

{% block main_content %}
<div class="title">
    交换友链规则：
</div>
<div class="apply">
    <div class="text-title">
        请各位大佬按照下面的格式书写发送到我的 Email 哦!
    </div>
    <pre>
站点名称：暗天使
站点地址：https://localhost
站点描述：一个普通的小博客哦~
站点图像：https://localhost/img/img.jpg</pre>
</div>

<div class="title">
    我的小伙伴们：
</div>
<div class="container-flex link-list">
    <div class="item">
        <div class="profile">
            <a href="https://blog.antianshi.xyz/">
                <img src="{{ url_for('static', filename='img/bg1.jpg') }}" alt="">
            </a>
        </div>
        <div class="text">
            <div class="site-name">
                <a href="https://blog.antianshi.xyz/">
                    暗天使 
                </a>
            </div>
            <hr>
            <div class="info">
                学习时的痛苦是暂时的 未学到的痛苦是终生的
            </div>
        </div>
    </div>
    <div class="item">
        <div class="profile">
            <a href="https://blog.antianshi.xyz/">
                <img src="{{ url_for('static', filename='img/bg1.jpg') }}" alt="">
            </a>
        </div>
        <div class="text">
            <div class="site-name">
                <a href="https://blog.antianshi.xyz/">
                    暗天使 
                </a>
            </div>
            <hr>
            <div class="info">
                学习时的痛苦是暂时的 未学到的痛苦是终生的
            </div>
        </div>
    </div>
    <div class="item">
        <div class="profile">
            <a href="https://blog.antianshi.xyz/">
                <img src="{{ url_for('static', filename='img/bg1.jpg') }}" alt="">
            </a>
        </div>
        <div class="text">
            <div class="site-name">
                <a href="https://blog.antianshi.xyz/">
                    暗天使 
                </a>
            </div>
            <hr>
            <div class="info">
                学习时的痛苦是暂时的 未学到的痛苦是终生的
            </div>
        </div>
    </div>
    <div class="item">
        <div class="profile">
            <a href="https://blog.antianshi.xyz/">
                <img src="{{ url_for('static', filename='img/bg1.jpg') }}" alt="">
            </a>
        </div>
        <div class="text">
            <div class="site-name">
                <a href="https://blog.antianshi.xyz/">
                    暗天使 
                </a>
            </div>
            <hr>
            <div class="info">
                学习时的痛苦是暂时的 未学到的痛苦是终生的
            </div>
        </div>
    </div>
    <div class="item">
        <div class="profile">
            <a href="https://blog.antianshi.xyz/">
                <img src="{{ url_for('static', filename='img/bg1.jpg') }}" alt="">
            </a>
        </div>
        <div class="text">
            <div class="site-name">
                <a href="https://blog.antianshi.xyz/">
                    暗天使 
                </a>
            </div>
            <hr>
            <div class="info">
                学习时的痛苦是暂时的 未学到的痛苦是终生的
            </div>
        </div>
    </div>
    <div class="item">
        <div class="profile">
            <a href="https://blog.antianshi.xyz/">
                <img src="{{ url_for('static', filename='img/bg1.jpg') }}" alt="">
            </a>
        </div>
        <div class="text">
            <div class="site-name">
                <a href="https://blog.antianshi.xyz/">
                    暗天使 
                </a>
            </div>
            <hr>
            <div class="info">
                学习时的痛苦是暂时的 未学到的痛苦是终生的
            </div>
        </div>
    </div>
    
</div>
{% endblock %}